<template>
  <div class="service">
    <div class="label-h4 interleave">政府惠民服务</div>
    <div class="service-nav">
      <!-- <div class="service-content ser-1" @click="$vux.toast.text('正在开发中...')">
      <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_putRecords.png" alt="">租赁备案</router-link></div> -->
      <div class="service-content ser-2">
        <a class="service-a" href="http://www.gzgjj.gov.cn">
        <img class="service-img" src="../../images/service/icon_accumulationFund.png" alt="">公积金</a>
      </div>
      <div class="service-content ser-3">
        <a class="service-a" href="http://www.hrssgz.gov.cn/">
        <img class="service-img" src="../../images/service/icon_socialSecurity.png" alt="">
        社保</a>
      </div>
      <!-- <div class="service-content ser-4" @click="$vux.toast.text('正在开发中...')">
       
        <a class="service-a" href="javascript:;">
        <img class="service-img" src="../../images/service/icon_livingPayment.png" alt="">
        生活缴费
        </a>
      </div>
      <div class="service-content ser-5" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_housingAdd.png" alt="">住房补贴</router-link>
      </div>
      <div class="service-content ser-6"  @click="$vux.toast.text('正在开发中...')">
        <a class="service-a" href="javascript:;"><img class="service-img" src="../../images/service/icon_residencePermit.png" alt="">居住证</a>
      </div>
      <div class="service-content ser-7" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_register.png" alt="">入户积分</router-link>
      </div>
      <div class="service-content ser-8" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_entrance.png" alt="">入学积分</router-link>
      </div> -->
    </div>
    <!-- <div class="label-h4 interleave">金融服务</div> -->
    <!-- <div class="service-nav">
      <div class="service-content ser-9" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_insurance.png" alt="">保险</router-link>
      </div>
      <div class="service-content ser-10" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_byStages.png" alt="">租金分期</router-link>
      </div>
    </div> -->
    <!-- <div class="label-h4 interleave">生活服务</div> -->
    <!-- <div class="service-nav">
      <div class="service-content ser-11" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/icon_move.png" alt="">搬家</router-link>
      </div>
      <div class="service-content ser-12" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/iocn_maintain.png" alt="">维修</router-link>
      </div>
      <div class="service-content ser-13" @click="$vux.toast.text('正在开发中...')">
        <router-link class="service-a" to=""><img class="service-img" src="../../images/service/iocn_cleanKeeping.png" alt="">保洁</router-link>
      </div>
    </div> -->
    <div class="footDiv">
      <span class="line"></span>
      <div class="footerTip">更多服务即将上线,敬请期待</div>
      <span class="line1"></span>
    </div>
    
  </div>
</template>
 
<script>
  import { GroupTitle } from 'vux'
  export default {
    name: 'service',
    data () {
      return {
      }
    },
    components: {
      GroupTitle
    },
    methods: {
      serviceFn: function () {
        this.$vux.alert.show({
          content: '正在开发中'
        })
      }
    }
  }
</script>
 
 <style lang="less" scoped>
  @import "../../styles/baseVar.less";
  .service {
    background: #f4f4f4;
    .label-h4 {
      width: 100%;
      background: #fff;
      line-height: 2.8rem;
      padding-left: 0.75rem;
      font-size: @font-size-15;
      color: #838383;
      border-bottom: .5px solid #f4f4f4;
    }
    .interleave {
      margin-top: 0.3rem;
    }
    .service-nav {
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
    }
    .service-content {
      width: 50%;
      line-height: 2.6rem;
      text-indent: 50px;
      font-size: @font-size-15;
      .service-img {
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.6rem;
      }
      .service-a {
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-left: 0.75rem;
        color: #000;
      }
    }
    .footDiv{
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .footerTip{
      text-align: center;
      background: white;
      color: #ccc;
    }
    .line {
      background: white;
      display: inline-block;
      width: 80px;
      border-top: 1px solid #ccc ;
    }
     .line1 {
      background: white;
      display: inline-block;
      width: 80px;
      border-top: 1px solid #ccc ;
      position: relative;
      right: 0;
    }
  }
 </style>
